$control-chart: ();

@include b(control-chart) {
  width: 100%;
  height: 100%; 
  @include e(chart-grid) {
    width: 100%;
    height: 100%;    
    @include when('show-grid') {
      display: flex;
      height: calc(100% - 16px);
    }
    @include m('bottom') {
      flex-direction: column;
    }
    @include m('top') {
      flex-direction: column-reverse;
    }
    @include m('left') {
      flex-direction: row-reverse;
    }
    @include m('right') {
      flex-direction: row;
    }
    @include when('no-data') {
      display: none;
    }
  }
  @include e('chart-grid-container') {
    position: relative;
    flex: 1;
    height: 50%;
    @include when('bottom') {
      width: 100%;
      height: 50%;
      min-height: 50%;
    }
    @include when('top') {
      width: 100%;
      height: 50%;
      min-height: 50%;
    }
    @include when('left') {
      width: 50%;
      min-width: 50%;
      height: 100%;
    }
    @include when('right') {
      width: 50%;
      min-width: 50%;
      height: 100%;
    }
    @include when('no-grid') {
      flex: unset;
      width: 100%;
      height: 100%;
    }
  }
  @include e('chart') {
    width: 100%;
    height: 100%;
  }
  @include e('drill-detail') {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    padding: getCssVar('spacing', 'tight') 0;
    background: getCssVar('color', 'bg', 1);
    border: 1px solid getCssVar(color, border);
    border-radius: getCssVar('border-radius', small);
    box-shadow: getCssVar(color, elevated);

    @include m('item') {
      display: flex;
      gap: getCssVar('spacing', 'tight');
      align-items: center;
      height: 40px;
      padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base-loose');
      font-size: getCssVar('font-size', 'regular');
      cursor: pointer;

      &:hover {
        background-color: getCssVar(color, fill, 1);
      }
    }

    @include m('item-text') {
      margin-bottom: getCssVar('spacing', 'super-tight');
    }
  }
  @include e('grid') {
    flex: 1;
    height: auto;

    .cell {
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-table__body-wrapper {
      border-bottom: 1px solid getCssVar(color, border);
    }
  }
}
@include b('control-chart-chart-container'){
  width: 100%;
  height: 100%;
}
